<script setup lang="ts">
import { ElInput, ElSwitch } from 'element-plus';

import UploaderSingle from '@/components/common/UploaderSingle.vue';
import ProForm from '@/modules/package/form/components/ProForm.vue';
import useForm from '@/hooks/useForm';
import { TStall } from '@/global';
import { ProInputNumber } from '@/modules/package/form';
import { h } from 'vue';

const { source, actId } = defineProps<{
    source: TStall;
    actId: number;
}>();

const emits = defineEmits<{
    success: [];
}>();

const formItems = [
    {
        label: "企业Logo",
        children: {
            field: 'logo',
            // @ts-expect-error
            type: h(UploaderSingle, { class: 'flex-center w-200px h-200px border-1 rounded-md border-#ddd' }),
        }
    },

    {
        label: "企业名称",
        children: {
            field: 'title',
            type: ElInput,
        }
    },
    {
        label: "企业地址",
        children: {
            field: 'address',
            type: ElInput,
        }
    },
    {
        label: "企业介绍",
        children: {
            field: 'desc',
            type: ElInput,
            props: {
                type: "textarea"
            }
        }
    },
    {
        label: "状态",
        children: {
            field: 'is_show',
            type: ElSwitch,
            props: {
                activeValue: 0,
                inactiveValue: 1,
                activeText: '正常',
                inactiveText: '禁用',
            }
        }
    },
    {
        label: "排序",
        children: {
            field: 'sort',
            type: ProInputNumber,
            props: {
                min: 1,
                precision: 0,
                max: 1000
            }
        }
    },
    {
        label: "备注",
        children: {
            field: 'remark',
            type: ElInput,
            props: {
                type: "textarea"
            }
        }
    },

];

const { refForm, isFetching, model, reset, submit, onFetchResponse } = useForm<TStall>(
    // ApiActivity[source ? "standEdit" : "standAdd"],
    "",
    {
        defaultModel: Object.assign({
            act_id: actId,
            is_show: 0,          // 默认展示（0是展示）
            sort: 100,
        }, source && { ...source, deposit_amount: source.deposit_amount / 100 }),
        formatModel: (data) => {
            // 转为分
            return { ...data, deposit_amount: data.deposit_amount * 100 };
        }
    });

onFetchResponse(() => emits('success'));

const rules = {
    logo: { required: true, message: '请上传企业Logo' },
    title: { required: true, message: '请输入企业名称' },
    address: { required: true, message: '请输入企业位置' },
    desc: { required: true, message: '请输入企业介绍' },
    sort: { required: true, message: '输入展位顺序' },
};
</script>

<template>
    <ProForm :col="24"
             ref="refForm"
             :rules="rules"
             :model="model"
             :loading="isFetching"
             :form-items="formItems"
             label-width="6em"
             @reset="reset"
             @submit="submit">
    </ProForm>
</template>